<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BPMN动态候选人绑定功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        .input-group {
            margin: 10px 0;
        }
        label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
        }
        input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            width: 200px;
        }
        .status {
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>BPMN动态候选人绑定功能测试</h1>
        <p>本页面用于测试Uniflow平台的BPMN动态候选人绑定功能，包括流程部署、启动、任务查询、认领和完成等操作。</p>
    </div>

    <div class="container">
        <div class="test-section">
            <h2>1. 部署测试流程</h2>
            <p>部署包含候选人任务的BPMN流程定义</p>
            <button onclick="deployTestProcess()">部署测试流程</button>
            <div id="deployResult" class="result"></div>
        </div>

        <div class="test-section">
            <h2>2. 启动候选人任务流程</h2>
            <p>启动一个新的流程实例</p>
            <div class="input-group">
                <label>业务键:</label>
                <input type="text" id="businessKey" value="test-candidate-001" placeholder="业务键">
            </div>
            <button onclick="startCandidateTaskProcess()">启动流程</button>
            <div id="startResult" class="result"></div>
        </div>

        <div class="test-section">
            <h2>3. 查询流程候选任务</h2>
            <p>查询指定流程实例中的候选任务</p>
            <div class="input-group">
                <label>流程实例ID:</label>
                <input type="text" id="processInstanceId" placeholder="从启动流程结果中获取">
            </div>
            <button onclick="getProcessCandidateTasks()">查询候选任务</button>
            <div id="candidateTasksResult" class="result"></div>
        </div>

        <div class="test-section">
            <h2>4. 查询用户候选任务</h2>
            <p>查询指定用户的所有候选任务</p>
            <div class="input-group">
                <label>用户ID:</label>
                <input type="text" id="userId" value="user1" placeholder="用户ID">
            </div>
            <button onclick="getUserCandidateTasks()">查询用户候选任务</button>
            <div id="userCandidateTasksResult" class="result"></div>
        </div>

        <div class="test-section">
            <h2>5. 认领候选任务</h2>
            <p>认领一个候选任务</p>
            <div class="input-group">
                <label>任务ID:</label>
                <input type="text" id="claimTaskId" placeholder="从候选任务列表中获取">
            </div>
            <div class="input-group">
                <label>用户名:</label>
                <input type="text" id="claimUserName" value="测试用户" placeholder="用户名">
            </div>
            <button onclick="claimTask()">认领任务</button>
            <div id="claimResult" class="result"></div>
        </div>

        <div class="test-section">
            <h2>6. 完成任务</h2>
            <p>完成已认领的任务</p>
            <div class="input-group">
                <label>任务ID:</label>
                <input type="text" id="completeTaskId" placeholder="任务ID">
            </div>
            <div class="input-group">
                <label>用户名:</label>
                <input type="text" id="completeUserName" value="测试用户" placeholder="用户名">
            </div>
            <button onclick="completeTask()">完成任务</button>
            <div id="completeResult" class="result"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080/api';

        // 显示结果
        function showResult(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            element.textContent = JSON.stringify(data, null, 2);
            element.className = `result ${isError ? 'error' : 'success'}`;
        }

        // API调用封装
        async function apiCall(url, options = {}) {
            try {
                const response = await fetch(url, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                const data = await response.json();
                return { success: response.ok, data };
            } catch (error) {
                return { success: false, error: error.message };
            }
        }

        // 1. 部署测试流程
        async function deployTestProcess() {
            const result = await apiCall(`${API_BASE}/test/candidate-tasks/deploy`, {
                method: 'POST'
            });
            showResult('deployResult', result.data || result.error, !result.success);
        }

        // 2. 启动候选人任务流程
        async function startCandidateTaskProcess() {
            const businessKey = document.getElementById('businessKey').value;
            const result = await apiCall(`${API_BASE}/test/candidate-tasks/start?businessKey=${encodeURIComponent(businessKey)}`, {
                method: 'POST'
            });
            showResult('startResult', result.data || result.error, !result.success);
            
            // 如果启动成功，自动填充流程实例ID
            if (result.success && result.data && result.data.data) {
                document.getElementById('processInstanceId').value = result.data.data;
            }
        }

        // 3. 查询流程候选任务
        async function getProcessCandidateTasks() {
            const processInstanceId = document.getElementById('processInstanceId').value;
            if (!processInstanceId) {
                alert('请先输入流程实例ID');
                return;
            }
            
            const result = await apiCall(`${API_BASE}/test/candidate-tasks/process/${encodeURIComponent(processInstanceId)}/tasks`);
            showResult('candidateTasksResult', result.data || result.error, !result.success);
        }

        // 4. 查询用户候选任务
        async function getUserCandidateTasks() {
            const userId = document.getElementById('userId').value;
            if (!userId) {
                alert('请先输入用户ID');
                return;
            }
            
            const result = await apiCall(`${API_BASE}/test/candidate-tasks/user/${encodeURIComponent(userId)}/candidate-tasks`);
            showResult('userCandidateTasksResult', result.data || result.error, !result.success);
        }

        // 5. 认领候选任务
        async function claimTask() {
            const taskId = document.getElementById('claimTaskId').value;
            const userName = document.getElementById('claimUserName').value;
            
            if (!taskId) {
                alert('请先输入任务ID');
                return;
            }
            
            const result = await apiCall(`${API_BASE}/test/candidate-tasks/claim/${encodeURIComponent(taskId)}?userName=${encodeURIComponent(userName)}`, {
                method: 'POST'
            });
            showResult('claimResult', result.data || result.error, !result.success);
        }

        // 6. 完成任务
        async function completeTask() {
            const taskId = document.getElementById('completeTaskId').value;
            const userName = document.getElementById('completeUserName').value;
            
            if (!taskId) {
                alert('请先输入任务ID');
                return;
            }
            
            const result = await apiCall(`${API_BASE}/test/candidate-tasks/complete/${encodeURIComponent(taskId)}?userName=${encodeURIComponent(userName)}`, {
                method: 'POST'
            });
            showResult('completeResult', result.data || result.error, !result.success);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('BPMN动态候选人绑定功能测试页面已加载');
        });
    </script>
</body>
</html>